<template>
  <div class="hello">
      <div class="pagetittle">上传模块</div>
      <div class="pagenav">
          <div :class="['navitem',tittlelistcheck==item.key?'checkednav':'']" v-for="item in tittlelist" @click="changenav(item.key)">{{item.name}}</div>
      </div>
      <div class="main">
          <router-view></router-view>
      </div>
  </div>
</template>

<script>
// import ThreeChild from './ThreeChild'
export default {
    components: {
        // ThreeChild
    },
    mounted() {
        if (this.$route.path.endsWith('/uploadview')) {
            this.$router.push('/uploadview/Atlas');
        }
    },
    data () {
      return {
          tittlelistcheck:"Atlas",
          tittlelist:[
              {
                  name:"图册",
                  key:"Atlas",
              },
              {
                  name:"多媒体",
                  key:"Media",
              }
          ]
      }
    },
    methods: {
        changenav(key){
            this.tittlelistcheck = key;
            this.$router.push(`/uploadview/${key}`)
        }
    },
    created(){

    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
    padding:10px;
}
.pagenav{
    margin-top: 20px;
    height:45px;
    line-height: 45px;
}
.pagenav .navitem{
    float: left;
    cursor: pointer;
    padding: 0px 12px;
    border: 1px dashed #5f5a5a;
    margin-left: 10px;
    background: #7ee47e;
}
.pagenav .navitem:hover{
    color:#fff;
    background: black;
}
.checkednav{
    background: black;
    color:#fff;
}
</style>
